<template>
  <van-nav-bar title="首页" />

  <div class="wrap">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in list" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      background="transparent"
      shape="round"
    />
  </div>

  <van-grid>
    <van-grid-item text="每日福利">
      <template #icon>
        <img
          src="https://img1.baidu.com/it/u=2716398045,2043787292&fm=253&fmt=auto&app=120&f=JPEG?w=100&h=100"
          alt=""
          style="width: 40px; height: 40px"
        />
      </template>
    </van-grid-item>
    <van-grid-item icon="photo-o" text="热销榜" />
    <van-grid-item icon="photo-o" text="每日福利" />
    <van-grid-item icon="photo-o" text="热销榜" />
  </van-grid>

  <van-grid :column-num="2" gutter="10" style="margin: 20px 0">
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
  </van-grid>

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-card
      v-for="item in rommendList"
      :key="item.productId"
      :price="item.currentPrice"
      :title="item.productName"
      :thumb="item.imgUrl"
      :origin-price="item.originalPrice"
    />
  </van-list>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const [list] = getBanner();
    const value = ref("");

    const [rommendList, loading, finished, onLoad] = getRecommend();

    return {
      list,
      value,
      rommendList,
      loading,
      finished,
      onLoad,
    };
  },
};

const getBanner = () => {
  const list = ref([]);
  onMounted(() => {
    fetch("http://www.pudge.wang:4000/home/banner")
      .then((response) => response.json())
      .then((res) => {
        if (res.status === "0") {
          list.value = res.result.list;
        }
      });
  });
  return [list];
};

// const getRecommend = () => {
//   const rommendList = ref([]);
//   // loading用来表示是否要显示loading加载中小图标
//   const loading = ref(false);
//   // 表示是否全部加载结束
//   const finished = ref(false);
//   let page = 1;
//   const getData = () => {
//     fetch("http://www.pudge.wang:4000/home/recommend", {
//       method: "post",
//       headers: {
//         "content-type": "application/json",
//       },
//       body: JSON.stringify({
//         count: 3,
//         page: page,
//       }),
//     })
//       .then((response) => response.json())
//       .then((res) => {
//         if (res.status === "0") {
//           console.log(res);
//           rommendList.value = [...rommendList.value, ...res.result.list];
//           // 可以做下一次了
//           loading.value = false;
//           page++;
//           // 全部加载好了
//           // console.log(res.re)
//           if (res.result.list.length < 3) {
//             finished.value = true;
//           }
//         }
//       });
//   };
//   const onLoad = () => {
//     getData();
//   };

//   return [rommendList, loading, finished, onLoad];
// };

const getRecommend = () => {
  const store = useStore();
  const rommendList = computed(() => {
    return store.state.rommendList;
  });
  const loading = ref(false);
  const finished = ref(false);
  let page = 1;
  const onLoad = () => {
    // console.log("onLoad");
    store.dispatch("getDataAsync", page).then((finsish) => {
      // console.log("请求已结束");
      loading.value = false;
      page++;
      finished.value = finsish;
    });
  };

  return [rommendList, loading, finished, onLoad];
};
</script>

<style lang="less" scoped>
.wrap {
  position: relative;

  /deep/.van-search {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;

    .van-search__content {
      background: rgba(255, 255, 255, 0.3);
    }

    input::placeholder {
      color: #fff;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  height: 220px;

  img {
    width: 100%;
    height: 100%;
  }
}

/deep/.van-swipe__indicator {
  width: 15px;
  height: 4px;
  background: red;
  border-radius: 0;
}
</style>
